<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Hadwinling</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
    <meta name="renderer" content="webkit"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!--顶部轮播图start-->
    <link rel="stylesheet" type="text/css" th:href="@{/css/banner.css}">
    <script type="text/javascript" th:src="@{/js/banner.js}"></script>
    <style type="text/css">
        .frame
        {
            width:  85vw;
            height: 40vw;
            margin: 2vw auto;
        }
    </style>
    <!--顶部轮播图END-->
    <link rel="stylesheet" th:href="@{/css/tabs.css}">
    <link rel="stylesheet" th:href="@{/css/style.css}">

    <style type="text/css">
        .goTop >img{
            width: 50px;
            height: 50px;
            cursor: pointer;
        }
        .goTop{
            position: fixed;
            right : 20px;
            bottom : 20px;
        }
    </style>

</head>
<body>
<!--顶部导航栏-->
<div th:replace="Currency/indexnav::indexnav(1)"></div>

<!--顶部轮播图start-->
<!--主要内容》》》-->
<div class="banners frame">

    <!--受保护块，不建议修改》》》-->
    <div class="click_left"><img class="get_height" onclick="banner_left_right('left')" th:src="@{/images/banner_left.png}"></div>
    <div class="click_right"><img onclick="banner_left_right('right')" th:src="@{/images/banner_right.png}"></div>
    <div class="number">
        <div class="numbers"></div>
        <div style="clear: both;"></div>
    </div>
    <!--《《《受保护块，不建议修改-->

    <!--onlick事件调用函数link(参数1，参数2)>>>参数1:跳转链接; 参数2:跳转方式（true:在新的窗口打开链接,false:在当前窗口打开链接）-->
    <div class="banner_img">

        <!--在此位置内添加img标签即可>>>-->
        <a th:href="@{'/article/'+${topArticleList.id}}" th:each="topArticleList,classNum:${topArticleList}">
            <img th:class="'banner_img'+(${classNum.count})"
                 th:src="${topArticleList.photo}">
        </a>

        <!--<<<在此位置内添加img标签即可-->

    </div>

    <!--此段代码不可移动位置-->
    <script type="text/javascript">
        loads();
    </script>
    <!--此段代码不可移动位置-->

</div>
<!--《《《主要内容-->
<!--顶部轮播图END-->
<hr class="container">

<div class="container">
    <div class="row">
        <div class="col-md-6" style="border-right: 1px solid #ccc">
            <h3 class="yiyan">每日一言</h3>
            <p class="yiyan"><span class="glyphicon glyphicon-calendar">&nbsp;</span> <span th:text="${#dates.format(topDayList.get(0).createtime,'yyyy-MM-dd')}"></span></p>
            <a href="" style="text-decoration:none">
                <p  style="text-indent:2em; font-size:16px " th:text="${topDayList.get(0).day}">
                    品牌之间的激烈竞争，以及可听戴产品的快速迭代，将促使 TWS 产品的渗透率在短期内大增。根据我们的调查结果，英国超过一半的潜在买家，计划在可听戴设备的交易中花费 50-150 英镑。品牌之间的激烈
                </p>
                <p class="author pull-right">——<span th:text="${topDayList.get(0).author}">Counterpoint Research</span></p>
            </a>
        </div>
        <div class="col-md-6">
            <h3 class="yiyan">#公告</h3>
            <p class="yiyan"></p>
            <a href="" style="text-decoration:none">
                <p  style="text-indent:2em; font-size:16px " th:text="${topNoticeList.get(0).notice}">品牌之间的激烈竞争，以及可听戴产品的快速迭代，将促使 TWS 产品的渗透率在短期内大增。根据我们的调查结果，英国超过一半的潜在买家，计划在可听戴设备的交易中花费 50-150 英镑。品牌之间的激烈
                </p>
<!--                <p class="author pull-right">——<span th:text="${topNoticeList.get(0).}">Counterpoint Research</span></p>-->
            </a>
        </div>
        <div class="col-md-4"></div>
    </div>
    <hr>
</div>

<!-- Categories strat -->
<div class="categories content-area-7">
    <div class="container">
        <!-- Main title -->
        <div class="main-title text-center">
            <h1>Most Popular Tag</h1>
            <p>Looking for the heart</p>
        </div>
        <div class="row">
            <div class="col-lg-5 col-md-12 col-sm-12 col-pad">
                <div class="category">
                    <div class="category_bg_box category_long_bg ">
                        <img th:src="${topList.get(0).tagphoto}" alt="">
                        <div class="category-overlay">
                            <div class="category-content">
                                <h3 class="category-title">
                                    <a th:href="@{'/checkTag/'+${topList.get(0).id}}" ><span th:text="${topList.get(0).tag}">生活</span></a>
                                </h3>
                                <h4 class="category-subtitle"><span style="color: white" th:text="${topList.get(0).tagnum}">12</span> Properties</h4>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="col-lg-7 col-md-12 col-sm-12">
                <div class="row">
                    <div class="col-sm-6 col-pad">
                        <div class="category">
                            <div class="category_bg_box cat-1-bg">
                                <img th:src="${topList.get(1).tagphoto}" alt="">
                                <div class="category-overlay">
                                    <div class="category-content">
                                        <h3 class="category-title">
                                            <a th:href="@{'/checkTag/'+${topList.get(1).id}}"><span th:text="${topList.get(1).tag}">生活</span></a>
                                        </h3>
                                        <h4 class="category-subtitle"><span style="color: white" th:text="${topList.get(1).tagnum}">27</span> Properties</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-pad">
                        <div class="category">
                            <div class="category_bg_box ">
                                <img th:src="${topList.get(2).tagphoto}" alt="">
                                <div class="category-overlay">
                                    <div class="category-content">
                                        <h3 class="category-title">
                                            <a th:href="@{'/checkTag/'+${topList.get(2).id}}"><span th:text="${topList.get(2).tag}">生活</span></a>
                                        </h3>
                                        <h4 class="category-subtitle"><span style="color: white" th:text="${topList.get(2).tagnum}">98</span> Properties</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-pad">
                        <div class="category">
                            <div class="category_bg_box ">
                                <img th:src="${topList.get(3).tagphoto}" alt="">
                                <div class="category-overlay">
                                    <div class="category-content">
                                        <h3 class="category-title">
                                            <a th:href="@{'/checkTag/'+${topList.get(3).id}}"><span th:text="${topList.get(3).tag}">生活</span></a>
                                        </h3>
                                        <h4 class="category-subtitle"><span style="color: white"th:text="${topList.get(3).tagnum}">98</span> Properties</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-pad">
                        <div class="category">
                            <div class="category_bg_box ">
                                <img th:src="${topList.get(4).tagphoto}" alt="">
                                <div class="category-overlay">
                                    <div class="category-content">
                                        <h3 class="category-title">
                                            <a th:href="@{'/checkTag/'+${topList.get(4).id}}"><span th:text="${topList.get(4).tag}">生活</span></a>
                                        </h3>
                                        <h4 class="category-subtitle"><span style="color: white" th:text="${topList.get(4).tagnum}">98</span>  Properties</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <hr class="container">
</div>
<!-- Categories end -->

<!-- Blog body start -->
<div class="blog-body content-area">
    <div class="container">
        <!-- Main title -->
        <div class="main-title text-center">
            <h1>Hot Bolg</h1>
            <p>Looking for the heart</p>
        </div>
        <div class="row" id="articleList">
<!--            <div class="col-lg-4 col-md-6">-->
<!--                <div class="blog-1">-->
<!--                    <div class="blog-photo">-->
<!--                        <img src="img/blog/blog-1.jpg" alt="small-blog" class="img-fluid">-->
<!--                        <div class="date-box">-->
<!--                            <span>14</span>Nov-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="detail">-->
<!--                        <h3>-->
<!--                            <a href="blog-single-sidebar-right.html">Selling Your Real House</a>-->
<!--                        </h3>-->
<!--                        <div class="post-meta">-->
<!--                            <span><a href="#"><i class="flaticon-people"></i>Amdin</a></span>-->
<!--                            <span><a href="#"><i class="flaticon-comment"></i>27</a></span>-->
<!--                            <span><a href="#"><i class="fa fa-heart-o"></i>27</a></span>-->
<!--                        </div>-->
<!--                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard</p>-->
<!--                        <a href="blog-single-sidebar-right.html" class="read-more">Read more</a>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->

        </div>
        <!-- Page navigation start -->
        <div class="row" id="addMore">
            <!--            <div  class = "col-md-offset-6 col-lg-offset-4col-xl-offset-4">-->
            <!--                <button class="addMoreBtn">加载更多</button>-->
            <!--            </div>-->
        </div>
    </div>
</div>
<!-- Blog body end -->

<!--footer-->
<footer th:replace="Currency/indexnav::indexfooter"></footer>
<!--footer-->

<!--State GoToTop-->
<div th:replace="Currency/indexnav::GoToTop"></div>
<!--End GoToTop-->

<script>
    //这里自加载
    $(function () {
        //获取数据
        getPhoto(1);
    })

    function getPhoto(pageNum) {
        $.ajax({
            url:"[(@{/article})]",
            data:{"pageNum":pageNum},
            type:"post",
            success:function (message) {
                // console.log(1);
                // console.log(message);
                build_photo(message);
                // addMore(message);
                build_More(message)

            }
        })
    }




    function build_More(result) {
        if (result.extend.pageInfo.hasNextPage == false){
            //先清空，防止累加
            $("#addMore").empty();
            // $("#addMoreBtn").empty();

            var div1 = $("<div  class = \"col-md-offset-6 col-lg-offset-4col-xl-offset-4\"></div>")
            var btn = $("<p  id=\''>亲，我也是有底线的哦</p>")
            div1.append(btn)
                .appendTo("#addMore")
        }else{
            //先清空，防止累加
            $("#addMore").empty();
            var div1 = $("<div  class = \"col-md-offset-6 col-lg-offset-4col-xl-offset-4\"></div>")
            var btn = $("<button class=\"addMoreBtn  btn-success\" id=\'addMoreBtn'>加载更多</button>")
            div1.append(btn)
                .appendTo("#addMore")
            $("#addMoreBtn").click(function () {
                getPhoto(result.extend.pageInfo.nextPage);
            })
        }
    }

    function build_photo(result){
        // $("#imgList ").empty();

        //获取json的list数据，即图片数据
        var articleLiat = result.extend.pageInfo.list;

        //jq的遍历
        $.each(articleLiat,function (index,item) {
            var div1 = $(" <div class=\"col-lg-4 col-md-6\"></div>");
            var div2 = $("<div class=\"blog-1\"></div>");
            var div3 = $("<div class=\"blog-photo\"></div>");
            var img = $("<img src=\"...\" alt=\"...\" style=\"width:360px;height:225px\" class='center-block' >").attr('src',item.photo);
            var div5 = $(" <div class=\"detail\"></div>");
            var h3 = $("<h3></h3>");
            var a =$("<a href=''>Selling Your Real House</a>").attr('href','article/'+item.id ).text(item.title);
            var p = $("<p></p>").append(item.content);
            var a2 = $("<a href=\"blog-single-sidebar-right.html\" class=\"read-more\">Read more</a>");

            var blog_photo_div = div3.append(img);
            var h3_div = h3.append(a)
            var detail_div =div5.append(h3_div).append(p).append(a2);
            var blog_1_div = div2.append(blog_photo_div).append(detail_div);
            var all_div = div1.append(blog_1_div).appendTo("#articleList");

            //append方法执行完成以后还是返回原来的元素
            //appendTo追加到teacher_table

        })
    }
</script>


</body>
</html>